<!-- 组件说明 -->
<template>
    
    <div class="tab-bar-item fd-y y-center" @click="itemClick">
        <div v-if="!isActive">
            <slot  name="item-icon"></slot>
        </div>
        <div v-else>
            <slot  name="item-icon-active"></slot>
        </div>

        <!-- 以上的2个slot可以不使用div包裹 -->
        
        


        <!-- slot如果外层没嵌套div进行判断，而是将判断放入slot中，会被 <div slot="item-text">我的</div>直接覆盖掉 -->
        <div  :style="activeStyle">
            <slot name='item-text'></slot>
        </div>
        
       
       
    </div>
   
       
</template>

<script>
    //import x from ''
    export default {
        name: 'TabBarItem',
        components: {

        },
        props: {
            path: String,
            activeColor: {
                type: String,
                defaflt: 'red'
            }

        },
        data () {
            return {
                // isActive: false
            };
        },

        computed: {
            isActive() {
                //判断当前活跃的路由是否包含当前传进来的字符
                console.log('this.$route')
               
                return this.$route.path.indexOf(this.path) !== -1
            },
            activeStyle() {
                return this.isActive ? {color: this.activeColor} : {}
            }
        },
        methods: {
            itemClick() {
                console.log('itemClick')
                this.$router.replace(this.path).catch(err => {})
                // 这里不加.catch会出现双击报错
            }
        },
    }
</script>

<style  scoped>
    .tab-bar-item {
        flex: 1;
        text-align: center;
        height: 49px;
        /* ios和安卓很多高度基本都是49 */
        font-size: 14px;
    }

    .tab-bar-item img {
        margin-top: 3px;
        margin-bottom: 2px;
        width:24px;
        height: 24px;
     
      
    }

    .active {
        color: red;
    }

</style>